import React, { Component } from 'react';
import { EditorState, convertToRaw ,ContentState} from 'draft-js';
import { Editor } from 'react-draft-wysiwyg';
import draftToHtml from 'draftjs-to-html';
import htmlToDraft from 'html-to-draftjs';

import '../../../../node_modules/react-draft-wysiwyg/dist/react-draft-wysiwyg.css';

// 富文本编辑器
class RichTextEditor extends Component {
  constructor(props) {
    super(props);
    const proDes=this.props.proDes
    if(proDes) { //如果有proDes属性则是修改页面
      const contentBlock = htmlToDraft(proDes);
      const contentState = ContentState.createFromBlockArray(contentBlock.contentBlocks);
      const editorState = EditorState.createWithContent(contentState);
      this.state = {
        editorState,
      };
    }else{//如果没有proDes属性则是添加商品页面
      this.state = {
        editorState: EditorState.createEmpty(),
      }
    }
  }
  

  onEditorStateChange=(editorState) => {
    this.setState({
      editorState,
    });
  };

  getDes=()=>{
      return draftToHtml(convertToRaw(this.state.editorState.getCurrentContent()))
  }

  render() {
    const { editorState } = this.state;
    return (
      <div>
        <Editor
          editorStyle={{border:"1px solid #3D628D",height:150}}
          editorState={editorState}
          wrapperClassName="demo-wrapper"
          editorClassName="demo-editor"
          onEditorStateChange={this.onEditorStateChange}
        />
      </div>
    );
  }
}
export default RichTextEditor;